import { Form, Input, InputNumber, Select } from "antd"
import lessModule from "./index.module.less"
import HomePage_ModalComponent_CancelAndSubmitFooterComponent from "../../../../../../component/modal/component/cancelAndSubmitFooter";

// 主页-调试测试页面-策略投切页面-弹窗组件
interface homePageDebuggingAndTestingPageStrategicInvestmentPageModalComponentInterface {
    modalData: object
    change_cancel: Function
}
const HomePage_DebuggingAndTestingPage_StrategicInvestmentPage_ModalComponent: React.FC<homePageDebuggingAndTestingPageStrategicInvestmentPageModalComponentInterface> = (props) => {
    const [form] = Form.useForm();
    const infoList = [
        {
            label: "隔离装置",
            key: "",
        },
        {
            label: "调度编号",
            key: "",
        },
    ]
    const formList = [
        {
            label: "中性点电流限值（A）",
            key: "teamName",
            type: "inputNumber",
            placeholder: '请输入中性点电流限值（A）'
        },
        {
            label: "中性点电流越限时间（S）",
            key: "teamName",
            type: "inputNumber",
            placeholder: '请输入中性点电流越限时间（S）'
        },
        {
            label: "电容低电压限值（V）",
            key: "teamName",
            type: "inputNumber",
            placeholder: '请输入电容低电压限值（V）'
        },
        {
            label: "电容低电压越限时间（M）",
            key: "teamName",
            type: "inputNumber",
            placeholder: '请输入电容低电压越限时间（M）'
        },
    ]
    const change_submit = () => {
        form.validateFields().then((value) => {

        })
    }
    return (
        <div className={lessModule["homePageDebuggingAndTestingPageStrategicInvestmentPageModalComponent"]}>
            <header className={lessModule["homePageDebuggingAndTestingPageStrategicInvestmentPageModalComponent-header"]}>
                <div>投切设置</div>
                <div className={lessModule["homePageDebuggingAndTestingPageStrategicInvestmentPageModalComponent-header__right"]}>
                    <span>当前模式：</span>
                    <span className={lessModule["header-right__value"]}>{"自动"}</span>
                </div>
            </header>
            <main className={lessModule["homePageDebuggingAndTestingPageStrategicInvestmentPageModalComponent-main"]}>
                <div className={lessModule["homePageDebuggingAndTestingPageStrategicInvestmentPageModalComponent-main__info"]}>
                    {
                        infoList.map((item, idx) => {
                            return (
                                <div key={`infoItem${idx}`} className={lessModule["main-info__item"]}>{item["label"]}：{"555"}</div>
                            )
                        })
                    }
                </div>
                <Form className={lessModule["homePageDebuggingAndTestingPageStrategicInvestmentPageModalComponent-main__form"]}
                    layout="vertical"
                    form={form}
                    initialValues={{ "": "6666" }}
                >
                    {
                        formList.map((item, idx,) => {
                            return (
                                <Form.Item key={`formItem${idx}`} className={lessModule["main-form__item"]}
                                    label={`${item["label"]}：`}
                                    name={item['key']}
                                    required={false}
                                    rules={[{ required: true, message: item["placeholder"] }]}
                                >
                                    {
                                        item["type"] === "inputNumber" && <InputNumber className={lessModule["form-item__inputNumber"]} min={0} step="0.01" autoComplete="off" />
                                    }
                                </Form.Item>
                            )
                        })

                    }
                </Form>
            </main>
            <footer className={lessModule["homePageDebuggingAndTestingPageStrategicInvestmentPageModalComponent-footer"]}>
                <HomePage_ModalComponent_CancelAndSubmitFooterComponent flexGap={24} fontSize={16} change_cancel={() => props.change_cancel(false)} change_submit={change_submit} />
            </footer>
        </div>
    )
}
export default HomePage_DebuggingAndTestingPage_StrategicInvestmentPage_ModalComponent